<!--  -->
<template>
  <!-- <div :obj="obj" style="width:100%;min-height:250px;" :id="obj.id"></div> -->
  <div :data="data" :color="color" :name="name" style="width:100%;min-height:250px;" :id="id"></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name:'pie',
    props:{
        // obj:{
        //     type:Object
        // }
        data:{
            type:Array,
            default:[]
        },
        name:String,
        id:String,
        color:{
            type:Array,
            default:function(){return['#61A0A8','#D48265','#91C7AE','#749F83','#CA8622']}
        }

    },
    mounted(){
        this.$nextTick(()=>{
            let pie=echarts.init(document.getElementById(this.id));
            let namesArr=this.data.map(item=>{
                return item.name
            });
            const option={
                tooltip:{
                    trigger:'item',
                    formatter:"{a} <br/>{b} : {c} ({d}%)"
                },
                legend:{
                    left:'left',
                    orient: 'vertical',
                    data:namesArr
                },
                color:this.color,
                series:[
                    {
                       name:this.name,
                       type:'pie',
                       radius:'70%',
                       center: ['60%', '60%'],
                       data:this.data,
                       label:{
                           show:true,
                           color:'#999',
                       },
                       labelline:{
                           show:true,
                           length:30,
                           length2:15
                       },
                       itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }

                ]
            }
            pie.setOption(option);
            window.addEventListener('resize', function () {
                pie.resize();
            });
        })
    }

}

</script>
<style lang='scss' >
</style>